<template>
  <div class="b"></div>
  <div class="a">
    <div class="a1" @click="fn">
      <img :src="items.poster" alt="" />
      <div class="a1a">
        <p class="c1">
          <h1>{{ items.name }}</h1>
          <div>{{ item.filmType.name }}</div>
        </p>
        <p>评分：<span>{{ items.grade }}分</span></p>
        <p class="aaa">主演: {{ items.list }}</p>
        <p>{{ items.nation }}|{{ items.runtime }}分钟</p>
      </div>
      <button>购票</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const fn = () => {
  router.push('/particulars')
}

import { computed } from 'vue'
// 接收过来的数据类型
import type { IFilmObj } from '@/type'

// 接收父级传递过来的参数
let props = defineProps<{
  item: IFilmObj
}>()

// props.item.actors = props.item.actors.map((it) => it.name).join(' ')
const items = computed(() => ({
  ...props.item,
  list: props.item.actors?.map((it) => it.name).join(' ')??'暂无数据'
}))


</script>

<style scoped>
.a {
  width: 100%;
  height: 124px;
  border-bottom: 1px solid #f8f8f8;
  margin-left: 16px;
}
.b {
  border-bottom: 1px solid #f8f8f8;
}
.a1 {
  width: 345px;
  height: 96px;
  margin-top: 16px;
  display: flex;
}
.a1 img {
  margin-right: 16px;
}
.a1a {
  width: 201px;
  height: 79px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.a1a span{
  color: #fe7300;
}
.a1a p {
  color: #797d82;
  height: 17px;
  overflow: hidden;
}

button {
  width: 55px;
  height: 26px;
  font-size: 12px;
  background: #fff;
  border: 1px solid #ff5f16;
  color: #ff5f16;
  margin-top: 30px;
  border-radius: 1px;
}
.aaa {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c1{
  display: flex;
}
.c1 h1{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c1 div{
  background-color: #ccc;
  color: #fff;
}
</style>
